<template>
	<view>
		<comtarbar class="comtarbar">
			<template #center>
				<view class="title"><view>动态详情</view></view>
			</template>
		</comtarbar>
		<view class="box">
			<view class="content_item">
				<view class="c_middle">
					<view class="c_item">
						<view class="c_item_left">
							<view><image lazy-load="true" :src="log.avatars" mode="aspectFill"></image></view>
						</view>
						<view class="c_item_right">
							<view class="c_item_name">{{ log.nickName }}</view>
							<rich-text :nodes="log.text"></rich-text>
							<view class="image_box">
								<view :class="log.imgList.length > 1 ? 'image_outter' : 'image_outer2'" v-for="(item2, index) in log.imgList" :key="index">
									<image @tap="previewImg(log.imgList, index)" lazy-load="true" :src="item2" mode="aspectFill"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="address" v-if="log.address != ''">{{ log.address }}</view>
				<view class="c_other">
					<view class="c_other_time">{{ log.date | dateFormat }}</view>
					<view class="c_other_zk" :class="1 == index ? 'show' : ''">
						<view class="clbtn">
							<view @tap="giveALike(log.id, log.date)"><image src="../../../static/images/dynamic/dz.png" mode="widthFix"></image></view>
							<view @tap="openComment(log.id, log.date, log.id, log.nickName)"><image src="../../../static/images/dynamic/pl.png" mode="widthFix"></image></view>
						</view>
						<view class="m_btn" @tap="handler(1)">
							<view class="m_btn_box"><image src="../../../static/images/userhome/more.png" mode="widthFix"></image></view>
						</view>
					</view>
				</view>

				<view class="like_comment">
					<view class="like_box">
						<view class="aixin">♡</view>
						<view v-for="(item4, index4) in log.like" :key="index4 + 'like'">{{ item4.nickName }}</view>
					</view>
					<view class="comment_box">
						<view class="comment_item" v-for="(com, comIndex) in log.comments" :key="comIndex + 'com'">
							<view class="com_name">{{ com.fromName }}</view>
							<view class="huifu" v-if="com.toUser != log.id">回复</view>
							<view class="toUser" v-if="com.toUser != log.id">{{ com.toName }}</view>
							<view class="com_content">：{{ com.content }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<comment v-if="showComment" class="comment" @comment="comment"></comment>
	</view>
</template>

<script>
import request from '../../../api/request.js';
import comment from '../../../components/comment/comment.vue';
import {mapGetters} from "vuex"
export default {
	data() {
		return {
			id: null,
			date: null,
			log: {},
			index: -1,
			showComment:false,
			toUser:null,
			toName:null,
		};
	},
	onLoad(options) {
		let { id, date } = options;
		this.getSingleDynamic(id, date);
	},
	computed:{
		...mapGetters(["getUser"])
	},
	components:{
		comment
	},
	methods: {
		// 预览图片
		previewImg(imglist, index) {
			uni.previewImage({
				urls: imglist,
				current: index,
				longPressActions: {
					itemList: ['发送给朋友', '保存图片', '收藏'],
					success: function(data) {
						// console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					},
					fail: function(err) {
						// console.log(err.errMsg);
					}
				}
			});
		},
		// 点赞触发的事件
		async giveALike(id, date) {
			this.index = -1;
			// 本地添加数据
			// 判断点赞数组中是否存在该用户
			let index = this.log.like.findIndex(item => {
				//通过或来判断，因为存到数据库是存的id,本地存的是name
				return item.id == this.getUser._id;
			});
			if (index == -1) {
				//如果不存在则添加
				this.log.like.unshift({ id: this.getUser._id, nickName: this.getUser.name });
			} else {
				//存在则删除
				this.log.like.splice(index, 1);
			}
			// 向服务器发送数据
			let res = await request({
				url: '/dynamic/like',
				data: {
					token: uni.getStorageSync('token'),
					id,
					date
				},
				method: 'POST'
			});
		},
		// 点击...按钮
		handler(index) {
			if (this.index == index) {
				this.index = -1;
			} else {
				this.index = index;
			}
		},
		// 打开评论组件
		openComment(id, date, toUser, toName) {
			this.id = id;
			this.date = date;
			this.toUser = toUser;
			this.toName = toName;
			this.index = -1;
			this.showComment = true;
		},
		// 评论
		async comment(content) {
			this.showComment = false;
			// 本地添加数据
			this.log.comments.unshift({
				fromUser: this.getUser._id,
				fromName: this.getUser.name,
				toUser: this.toUser,
				toName: this.toName,
				content
			});
			// 向服务器发送数据
			let res = await request({
				url: '/dynamic/comment',
				data: {
					token: uni.getStorageSync('token'),
					id: this.id,
					date: this.date,
					toUser: this.toUser,
					toName: this.toName,
					content
				},
				method: 'POST'
			});
			if(res[1].data.status){
				uni.showToast({
					title: "评论成功",
					duration:1000
				});
			}else{
				uni.showToast({
					title: "发表评论失败",
					icon:"none",
					duration:1000
				});
			}
		},
		// 获取动态详情
		async getSingleDynamic(id, date) {
			let res = await request({
				url: '/dynamic/single',
				data: {
					token: uni.getStorageSync('token'),
					id,
					date
				}
			});
			this.log = res[1].data;
		}
	}
};
</script>

<style lang="scss" scoped>
@import '../../../commons/css/mycss.scss';
.comtarbar {
	background: #f4f4f4;
}
.box {
	padding: 60rpx 0rpx;
}
.c_middle {
	padding-top: 60rpx;
	.c_item {
		padding: 0rpx 20rpx;
		display: flex;
		.c_item_left {
			width: 130rpx;
			view {
				margin-left: 10rpx;
				width: 90rpx;
				height: 90rpx;
				border-radius: 10rpx;
				overflow: hidden;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
		.c_item_right {
			width: calc(100% - 120rpx);
			.c_item_name {
				font-size: 36rpx;
				color: #2054a8;
			}
			.text {
				font-size: 34rpx;
			}
			.image_box {
				display: flex;
				flex-wrap: wrap;
				margin-top: 16rpx;
				.image_outter {
					width: 190rpx;
					height: 190rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-bottom: 2rpx;
					overflow: hidden;
					image {
						width: 186rpx;
						height: 186rpx;
					}
				}
				.image_outer2 {
					width: 60%;
					display: flex;
					justify-content: center;
					align-items: center;
					image {
						width: 98%;
					}
				}
			}
		}
	}
}
.address {
	padding: 20rpx 40rpx 0rpx 150rpx;
	font-size: 28rpx;
	color: #528ed8;
}
.c_other {
	box-sizing: border-box;
	width: 100%;
	padding: 20rpx 40rpx 20rpx 150rpx;
	position: relative;
	// background: green;
	.c_other_time {
		font-size: 28rpx;
		color: #ccc;
	}
	.c_other_zk {
		height: 100%;
		text-align: right;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		// background: red;
		position: absolute;
		right: 40rpx;
		top: 0rpx;
		width: 60rpx;
		overflow: hidden;
		.clbtn {
			background: #7a7a7a;
			display: flex;
			padding: 6rpx 10rpx;
			border-radius: 10rpx;
			margin-right: 20rpx;
			view {
				height: 50rpx;
				width: 70rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
		.m_btn {
			width: 60rpx;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			.m_btn_box {
				height: 34rpx;
				width: 60rpx;
				background: #e7e7e7;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 8rpx;
				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}
	.show {
		width: 300rpx !important;
	}
}
.like_comment {
	margin: 0rpx 40rpx 0rpx 150rpx;
	padding: 4rpx;
	padding-bottom: 10rpx;
	border-radius: 10rpx;
	background: #e5e5e5;
	.like_box {
		display: flex;
		font-size: 30rpx;
		color: #1668ab;
		flex-wrap: wrap;
		view {
			height: 50rpx;
			line-height: 50rpx;
			padding-left: 10rpx;
		}
		.aixin {
			font-size: 40rpx;
		}
	}
}
.comment_box {
	margin-top: 4rpx;
	.comment_item {
		font-size: 30rpx;
		padding: 10rpx;
		display: flex;
		.com_name {
			color: #1668ab;
			flex: auto;
		}
		.huifu {
			padding: 0rpx 10rpx;
			flex: auto;
			color: #bebebe;
			font-size: 28rpx;
		}
		.toUser {
			color: #1668ab;
			flex: auto;
		}
		.com_content {
			flex: 60;
			word-wrap: break-word;
			word-break: normal;
		}
	}
	.c_ohter {
		display: flex;
		font-size: 30rpx;
		justify-content: space-between;
		padding: 10rpx 10rpx;
		padding-left: 20rpx;
		.c_sl {
			vertical-align: top;
			line-height: 30rpx;
			height: 30rpx;
		}
		.c_info {
			color: #1668ab;
		}
	}
}
.show {
	width: 300rpx !important;
}
/deep/ rich-text {
	div {
		font-size: 32rpx;
		word-wrap: break-word;
		word-break: normal;
		color: #555555;
	}
}
</style>
